<template>
  
  <div class="goodsEntry">
      <!-- <div>出库单</div> -->
      <el-form :inline="true" style="padding: 20px">
          <el-form-item label="扫码录入日期：">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                
                v-model="endtime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeTime">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="关键字搜索：">
        <el-input style="width: 300px;" v-model="queryData.goodsId" placeholder="请输入订单号,商品名称" size="medium"></el-input>
            
          </el-form-item>
          <el-form-item label="商品分类：">
              <el-select v-model="categoryvalue" size="medium" @change="changecatey">
                  <el-option :value="item.value" :label="item.label" v-for="item in category" :key="item.index"></el-option>
                 
                </el-select>
                <el-select v-model="queryData.goodsKindSecond" size="medium">
                    <el-option :value="item.id" :label="item.name" v-for="item in goodsKindSecond" :key="item.index"></el-option>
                  </el-select>
          </el-form-item>
          <el-form-item label="">
              <el-button type="primary" size="medium" @click="query">查询</el-button>
            <el-button type="primary" size="medium" @click="exportData">导出</el-button>
              
          </el-form-item>
          <el-form-item label="">
              <el-button type="primary" size="medium" @click="okentry">查看出库明细</el-button>
          </el-form-item>
          <el-form-item label="">
             <span>可出库订单：{{infovalue.orderNo}}个</span>
             <span>可出库数量：{{infovalue.goodsPcs}}个</span>
            </el-form-item>
            <el-form-item label="">
                 
              </el-form-item>
      </el-form>

    
    <el-row class="entry-info">
        
      <!-- <el-col :span="4" class="goods-category">
          仓库：
         <el-select v-model="storeId" size="medium" @change="handleChange">
          <el-option :value="item.id" :label="item.storeName" v-for="item in selectedOptions" :key="item.index"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="goods-category">
       
         <el-select v-model="inputAreaId" size="medium">
          <el-option :value="item.id" :label="item.areaName" v-for="item in deptData" :key="item.index"></el-option>
        </el-select>
    
      </el-col> -->
     
      
     <el-col :span="7" class="goods-id">
          <input type="text" @keyup.enter="smentry()" autofocus style="width:250px" v-model="goodsId">
        <el-button type="primary" size="medium" @click="smentry()">确定录入</el-button>
      </el-col>
      <el-col :span="6" :offset="2">
          <el-button type="primary" size="medium" @click="confirmation">确认出库</el-button>
          <el-button type="warning" size="medium" @click="canceloffAll">取消出库</el-button>
      </el-col>
    </el-row>
   
    <div class="wrapper">
      <el-table class="table" :data="tableData" stripe highlight-current-row border @selection-change="handleSelectionChange">
       <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column align="center" type="selection">
          </el-table-column>
        <el-table-column align="center" prop="order_no" label="订单号">
        </el-table-column>
        <el-table-column align="center" prop="order_time" label="下单时间" width="100">
        </el-table-column>
        <el-table-column align="center" prop="buy_count" label="购买数量">
          </el-table-column>
        <el-table-column align="center" prop="user_id" label="用户ID">
        </el-table-column>
        <el-table-column align="center" prop="operator_username" label="经办人">
        </el-table-column>
        <el-table-column align="center" prop="goods_name" label="商品名称">
        </el-table-column>
        <el-table-column align="center" prop="sku_no" label="SKU编码">
        </el-table-column>
        <el-table-column align="center" prop="goods_kind_second" label="商品类别">
        </el-table-column>
        <el-table-column align="center" prop="odorType" label="香型">
        </el-table-column>
        <el-table-column align="center" prop="netContent" label="净含量">
        </el-table-column>
        <el-table-column align="center" prop="unit" label="单位" width="50">
        </el-table-column>
        <el-table-column align="center" prop="alocohl" label="酒精度">
        </el-table-column>
        <el-table-column align="center" prop="raw_desc" label="原料">
        </el-table-column>
        <el-table-column align="center" prop="scan_status" label="状态">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.scan_status == 0">未扫描</span>
              <span v-else>已扫描</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="scan_now_count" label="当前扫码数量">
        </el-table-column>
        <el-table-column align="center" prop="address" label="操作" width="150">
          <template slot-scope="scope">
            <span class="canceloff-btn" @click="entery(scope.row)">查看</span>
            <span class="canceloff-btn" @click="canceloffOne(scope.row)">取消出库</span>
          </template>
        </el-table-column>
      </el-table>
     
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[10,20,30]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
    </div>
 
    <audio id="myaudio" src="../../../viode/004.mp3" controls="controls" hidden="hidden" ></audio>
    <audio id="warn" src="../../../viode/warn.mp3" controls="controls"  hidden="hidden"></audio>
    <el-dialog title="选择酒窖" :visible.sync="dialogFormVisible">
      <el-form>
        
        <el-form-item label="选择酒窖" :label-width="formLabelWidth">
          <el-select v-model="cellarType" placeholder="请选择酒窖">
            <!-- <el-option label="合肥酒窖" value="0"></el-option>
            <el-option label="温州酒窖" value="1"></el-option> -->
            <el-option label="温州帝仁仓储物流有限公司" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import exportExcel from '../../../axios/export.js'
  export default {
    data() {
      return {
        height: "auto",
        queryData: {
          startTime:'',
          endTime:'',
          goodsId:'',
          goodsKindSecond:''
        },
        infovalue:{},
        dialogFormVisible:false,
        goodsId:'',
        goodsKindSecond:[],
        categoryvalue:'',
        category:[],
        
        tableData: [{}],
        
        endtime:'',
        page: {
          pageSize: 10,
          current: 1,
          total: null
        },
        //联动
        options:[],
        selectedOptions:[],
        deptData:[],
        storeId:'',//仓库
        inputAreaId:'',//货位
        inType:'',//类型
        unusedNum:'',
        orderNo:'',
        cellarType:'',
        formLabelWidth:'120px',
        statusArr:[]
      };
    },
    mounted () {
      this.categoryList();
      this.tableList();
      this.outinfo();
      this.area();
    },
    methods: {
       //初始化数据
    async tableList() {
        try {
          let { data } = await this.$post({
            api: "/show/outstoreid",
            data:{
              current:this.page.current,
              pageSize:this.page.pageSize,
              startTime:this.queryData.startTime,
              endTime:this.queryData.endTime,
              goodsId:this.queryData.goodsId,
              status:0,
              goodsKindSecond:this.queryData.goodsKindSecond,
              type:0
            }
          });
          if (data.code === 0) {
            this.tableData = data.data;
            this.page.total = data.rdPage.total;
            // this.page.total = data.rdPage.total;
            // console.log(data)
            // this.rawList = data.data;
          } else {
            // this.$message({
            //   type: "error",
            //   message: data.msg
            // });
          }
        } catch (e) {
          // this.$message({
          //   type: "error",
          //   message: "接口报错"
          // });
        }
    },
    //页面数据
    async outinfo() {
    try {
          let { data } = await this.$post({
            api: "/show/outinfo"
            
          });
          if (data.code === 0) {
            this.infovalue = data.data
            // console.log(data)
          
           
          } else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        } catch (e) {
          this.$message({
            type: "error",
            message: "接口报错"
          });
        }
    },
      //商品分类接口
    async categoryList() {
    try {
      let { data } = await this.$post({
        api: "/show/leftmenu",
       
      });
      if (data.code === 0) {
       
        this.category.push({
          value:data.data[0].id,
          label:data.data[0].name
        })
        // this.goodsKindSecond = data.data[0].attrKeyList;

        
        // this.tableData = data.data;
        // this.page.total = data.rdPage.total;
        // console.log(data)
        // this.rawList = data.data;
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
    } catch (e) {
      this.$message({
        type: "error",
        message: "接口报错"
      });
    }
 },
 async categoryid(id) {
    try {
          let { data } = await this.$post({
            api: "/show/propertyInfo",
            data:{
              id:id
            }
          });
          if (data.code === 0) {
            // console.log(data)
          
            this.goodsKindSecond = data.data.attrKeyList;
          } else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        } catch (e) {
          this.$message({
            type: "error",
            message: "接口报错"
          });
        }
    },
    changecatey(id){
      this.categoryid(id)
      
    },
    //扫描入库
    async factoryGoods() {
        try {
          let { data } = await this.$post({
            api: "/scan/outGoods",
            data:{
              goodsId:this.goodsId,
              // storeId:this.storeId,
              // inputAreaId:this.inputAreaId,
              // inType:this.inType
            }
          });
          if (data.code === 0) {
            this.tableList();
            this.$message({
            type: "success",
            message: data.msg
           });
          
           this.autoplays();
          } else {
            this.$message({
              type: "error",
              message: data.msg
            });
            this.warnplay();
          }
        } catch (e) {
          // this.$message({
          //   type: "error",
          //   message: "接口报错"
          // });
        }
     },
      //音频录入
      autoplays(){
       let audio =  document.getElementById('myaudio')
       audio.currentTime = 0
       audio.play();
      // this.$netxTick(function(){
        // console.log(document.getElementById('myaudio'), 999)
         
      //  })
     },
     //
     warnplay(){
       let warn = document.getElementById('warn');
       warn.currentTime = 0
       warn.play();
     },
    //二维码录入
    smentry(){
      if(this.goodsId == ''){
          this.$message({
              type: "error",
              message: "扫描商品不能为空"
            });
        }else{
          this.factoryGoods();
          this.goodsId = '';
        }
        
    },
     //取消出库
    async storegoods() {
        try {
          let { data } = await this.$post({
            api: "/delete/outgoods",
            data:{
              orderNo:this.orderNo
             
            }
          });
          if (data.code === 0) {
            this.tableList();
            this.$message({
            type: "success",
            message: data.msg
           });
          } else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        } catch (e) {
          this.$message({
            type: "error",
            message: "接口报错"
          });
        }
     },
     //确认出库
    async addstoregoods() {
        try {
          let { data } = await this.$post({
            api: "/sure/outgoods",
            data:{
              orderNo:this.orderNo,
              cellarType:this.cellarType
              // goodsIds:this.goodsIds
            }
          });
          if (data.code === 0) {
            this.tableList();
            this.$message({
            type: "success",
            message: data.msg
           });
           this.dialogFormVisible = false;
          } else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        } catch (e) {
          this.$message({
            type: "error",
            message: "接口报错"
          });
        }
     },
     //仓库
     async area() {
        try {
          let { data } = await this.$post({
            api: "/show/store/area"
            
          });
          if (data.code === 0) {
            this.selectedOptions = data.data;
          console.log(data)
          } else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        } catch (e) {
          // this.$message({
          //   type: "error",
          //   message: "接口报错"
          // });
        }
     },
     //根据仓库id货位
     async areainfo(id) {
        try {
          let { data } = await this.$post({
            api: "/show/store/areainfo",
            data:{
              storeId:id
            }
          });
          if (data.code === 0) {
            
            this.deptData = data.data;
            this.inType = data.data[0].areaType;
            this.unusedNum = data.data[0].unusedNum;
          console.log(data)
          } else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        } catch (e) {
          this.$message({
            type: "error",
            message: "接口报错"
          });
        }
     },
     //导出
     async goodsexcel() {
        try {
          let { data } = await this.$post({
            api: "/import/outgoods",
            data:{
              // current:this.page.current,
              // pageSize:this.page.pageSize,
              startTime:this.queryData.startTime,
              endTime:this.queryData.endTime,
              goodsId:this.queryData.goodsId,
              status:0,
              goodsKindSecond:this.queryData.goodsKindSecond
            }
          });
          if (data.code === 0) {
            let urlstr = url+data.data.replace('static/','');
            window.location.href=urlstr;
          this.$message({
            type: "success",
            message: data.msg
          });
          console.log(urlstr)
          } else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        } catch (e) {
          // this.$message({
          //   type: "error",
          //   message: "接口报错"
          // });
        }
     },
     //货位两级联动
    //  async addarea() {
    //     try {
    //       let { data } = await this.$post({
    //         api: "/show/store/area"
            
    //       });
    //       if (data.code === 0) {
    //       //  console.log(data)
    //         data.data.forEach(function(element,index){
    //           let storeAreaList = element.storeAreaList;
    //           let pindex = index; 
    //           this.deptData.push({
    //             value:element.id,
    //             label:element.storeName,
    //             children:[]
    //           })
    //           storeAreaList.forEach(function(element,index){
    //            this.deptData[pindex].children.push({
    //                  value: element.id,
    //                  label: element.areaName,
    //             })
    //             // this.alldata[pindex] = {
    //             //   inType:element.areaType,
    //             //   unusedNum :element.unusedNum 
    //             // }
                
    //             // console.log(this.alldata)
    //           },this)

    //         },this);
           
             
    //       } else {
           
    //       }
    //     } catch (e) {
         
    //     }
    //  },
      //查询
      query() {
        this.tableList()
      },
      //导出
      exportData(){
        this.$confirm("确认将导出记录，您确定要导出吗?", "系统提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.goodsexcel();
          
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消导出"
          });
        });
        
        // exportExcel()
      },
      //查看
      entery(row){
        console.log(row)
        this.$router.push('factoryExitListDetail/'+row.order_no+'/'+row.sku_no)
      },
      //确定录入
      okentry(){
        console.log(111)
        this.$router.push('/outgoingOrders')
      },
      //确认出库
      confirmation(){

        
        console.log(this.statusArr)
        console.log(this.statusArr.indexOf(0))
        if(this.orderNo == '' ){
          this.$message({
              type: "error",
              message: "请勾选对应订单"
            });
        }else if(this.statusArr.indexOf(0) > -1){

          this.$message({
              type: "error",
              message: "当前订单未扫描完成"
            });
        }else{
            //状态为已扫码
            this.$confirm("你还有待完成扫描的订单，确认先出库已扫码的订单吗", "系统提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.dialogFormVisible = true;
          // this.addstoregoods()
          
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
         
         
         
        }
       
      },
      sureData(){
        this.addstoregoods()
        
      },
      //取消出库
      canceloffAll() {
        if(this.orderNo == ''){
          this.$message({
              type: "error",
              message: "请选择对应商品的勾选框"
            });
        }else{
          this.$confirm("取消出库记录，您确定要取消吗?", "系统提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.storegoods();
          
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消出库"
          });
        });
        }
      },
      //取消出库
      canceloffOne(row) {
        console.log(row)
     
      
          this.$confirm("取消将出库记录，您确定要取消吗?", "系统提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.orderNo = row.order_no
          this.storegoods();
          
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消出库"
          });
        });
       
      },
      handleCurrentChange(val) {
        this.page.current = val;
        this.tableList();
        // console.log(val);
      },
      handleSizeChange(val){
        this.page.pageSize = val;
        this.tableList();
      },
      showCateDialog() {
        this.goodsCates.show = true;
      },
      //时间选择器
      changeTime(arr){
        if(arr != null){
          this.queryData.startTime = arr[0];
          this.queryData.endTime = arr[1];
        }else{
          this.queryData.startTime = '';
          this.queryData.endTime = '';
        }
       
        
      },
      //联动选择
      handleChange(id) {
       this.areainfo(id)
     },
     //多选id
     handleSelectionChange(val){
       console.log(val)
      let array = [];
      this.statusArr = []
        val.forEach(element => {
          array.push(
             element.order_no 
          )
        });
        val.forEach(element => {
          this.statusArr.push(
             element.scan_status
          )
        });
      this.orderNo = array.join(',');

      //  console.log(val)
     }
    }
  };
</script>

<style lang="scss" scoped>
  .query {
    overflow: hidden;
    border-bottom: 1px solid #eeeeee;
    &-item {
      float: left;
      margin: 15px 20px;
    }
    .el-input {
      width: 150px;
    }
    .el-button {
      margin: 0 15px;
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .entry-info {
    padding: 15px 20px;
    border-bottom: 1px solid #eeeeee;
  }

  .goods-category {
    line-height: 32px;
    span {
      color: #0033ff;
      text-decoration: underline;
      cursor: pointer;
    }
  }

  .goods-count {
    line-height: 32px;
  }

  .goods-id {
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    span {
      position: relative;
      display: inline-block;
      padding: 8px 15px;
      border: 1px solid #333;
      &:after {
        content: "";
        position: absolute;
        top: -6px;
        left: -6px;
        width: 100%;
        height: 100%;
        padding: 6px;
        border: 1px solid #333;
      }
    }
  }

  .wrapper {
    padding: 10px 15px;
  }

  .canceloff-btn {
    color: #0033ff;
    cursor: pointer;
  }
</style>
